<template>
    <div>
        <Button v-if="showBackBtn" class="goBack" type="primary" @click="$router.back()"><Icon type="ios-arrow-back"/>返回</Button>
        <Card class="line-style" >
            <Form ref="formCustom" :model="formCustom"  :label-width="170"  :rules="ruleCustom">
                <Row>
                    <Col span="7">
                        <Form-item label="贷款需求" prop="loan_need" >
                            <i-input type="number" number v-model="formCustom.loan_need" placeholder="请输入贷款需求">
                                <span slot="append">亿元</span>
                            </i-input>
                        </Form-item>
                    </Col>
                    <Col span="7">
                        <Form-item label="已贷款" prop="loan_already">
                            <i-input type="number" number v-model="formCustom.loan_already" placeholder="请输入已贷款">
                                <span slot="append">亿元</span>
                            </i-input>
                        </Form-item>
                    </Col>
                    <Col span="7">
                        <Form-item label="上报日期" prop="imp_date">
                            <DatePicker @on-change="dateChange" :options="options1" :value="formCustom.imp_date"
                                        format="yyyy-MM-dd" type="date" placeholder="请选择上报日期"></DatePicker>
                        </Form-item>
                    </Col>
                </Row>
            </Form>
            <div class="line-button" v-if="!showDetail">
                <Button type="primary" @click="validateForm('formCustom')">保存</Button>
            </div>
        </Card>
        <Modal v-model="modal" title="确认操作" width="20"  @on-ok="handleSubmit">
            <div style="text-align:center">
                <p>是否确认保存!</p>
            </div>
        </Modal>
    </div>
</template>

<script>

import { insert, update, getById } from '@/api/outbreak-management/resume-work/plough-loans'
// 春耕备耕贷款添加
export default {
  data () {
    const validateInt = (rule, value, callback) => {
      const reg = /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/
      if (!reg.test(value)) {
        callback(new Error('最多只允许两位小数'))
      } else {
        callback()
      }
    }
    return {
      options1: { // 不可选今天之后的日期
        disabledDate (date) {
          return date && date.valueOf() > Date.now()
        }
      },
      // 保存状态码
      state: '',
      // 提示框
      modal: false,
      // 控制保存按钮显隐
      showDetail: false,
      // 控制返回按钮显隐
      showBackBtn: false,
      // 添加表单/修改表单
      formCustom: {
        loan_need: 0,
        loan_already: 0,
        imp_date: ''
      },
      ruleCustom: {
        loan_need: [
          { required: true, type: 'number', message: '贷款需求必填', trigger: 'blur' },
          { min: 0, max: 99999999, type: 'number', message: '贷款需求范围0-99999999', trigger: 'blur' },
          { validator: validateInt, trigger: 'blur' }
        ],
        loan_already: [
          { required: true, type: 'number', message: '已贷款数必填', trigger: 'blur' },
          { min: 0, max: 99999999, type: 'number', message: '已贷款数范围0-99999999', trigger: 'blur' },
          { validator: validateInt, trigger: 'blur' }
        ],
        imp_date: [
          { required: true, message: '日期必填', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    validateForm (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.modal = true
        } else {
          this.$Message.error('表单验证失败,请检查后再试!')
        }
      })
    },
    /**
       * 日期格式化
       */
    dateChange (date) {
      this.formCustom.imp_date = date
    },
    handleSubmit () {
      let requestData = this.formCustom
      if (requestData.id) {
        update(requestData).then(({ data }) => {
          let { errcode } = data
          if (errcode === 0) {
            this.$Message.success('保存成功!')
          } else {
            this.$Message.error('保存失败!')
          }
        })
      } else {
        insert(requestData).then(({ data }) => {
          let { errcode } = data
          if (errcode === 0) {
            this.$Message.success('保存成功!')
          } else {
            this.$Message.error('保存失败!')
          }
        })
      }
    },
    isEditStatus () {
      if (this.$route.query && this.$route.query.id) {
        console.log(this.$route.query.id)
        if (this.$route.query.showDetail) {
          this.showDetail = true
        }
        this.showBackBtn = true
        this.getEditData(this.$route.query.id)
      }
    },
    getEditData (id) {
      getById({ id }).then(({ data }) => {
        let { errcode, data: res } = data
        if (errcode === 0) {
          this.formCustom = res
          this.formCustom.imp_date = this.$common.moment(res.imp_date).format('YYYY-MM-DD')
          this.formCustom.loan_need = +this.formCustom.loan_need
          this.formCustom.loan_already = +this.formCustom.loan_already
        }
      })
    }
  },
  created () {
    this.isEditStatus()
  },
  mounted () {
  }
}
</script>
<style scoped lang="less">
    .line-style{
        .line-button{
            display: flex;
            justify-content:flex-end;
        }
        .ivu-date-picker{
            width: 100%;
        }
    }
</style>
